<template>
  <div class="list-root root" @scroll="scrollEvent">
    <h1 class="title">手机竞技</h1>
    <div class="list">
      <div class="list-content" v-for="(roomObj, i) in rooms" :key="i">
        <img :src="roomObj.room_src" alt="" />
        <router-link :to="'/detail/' + roomObj.room_id">
          <p>用户：{{ roomObj.nickname }}</p>
          <p>游戏：{{ roomObj.game_name }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      limit: 20, // 每次返回20条数据
      offset: 0, // 每次请求数据的偏移量，其实就是第一条数据的索引。
      rooms: [],
      cate_id: 0,
    };
  },
  activated() {
    this.cate_id = this.$route.params.cate_id;
    this.getListData();
  },
  deactivated() {
    this.rooms = [];
  },
  methods: {
    getListData() {
      this.axios
        .get(`/api/v1/getColumnRoom/${this.cate_id}`, {
          params: {
            limit: this.limit,
            offset: this.offset,
          },
        })
        .then((res) => {
          // rooms中要不断添加新请求的分页数据
          this.rooms = this.rooms.concat(res.data.data);
        });
    },
    scrollEvent(e) {
      console.log("滚动了");
      // 窗口高度 clientHeight
      // 内容高度 scrollHeight
      // 滚动偏移量(可滚动高度) scrollTop = scrollHeight - clientHeight
      if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) {
        // console.log("到底了");
        this.offset += this.limit;
        this.getListData();
      }
    },
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: lightblue;
}
.list > div {
  padding: 5px;
  box-sizing: border-box;
  background-color: white;
  border-radius: 2vh;
  width: 43vw;
  margin: 10px 10px 0 10px;
}
.list a {
  display: block;
}
img {
  width: 100%;
  margin: 1vh 0;
}
p {
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
